import React from 'react';
import * as THREE from 'three';
import Scene from '../Scene';
let group = new THREE.Group();
export default class TestModel {
    constructor(){
        this.scene = new Scene();
        this.canvasScene = this.scene.scene;
        // 添加一个平面渲染扫射效果
        this.initBoxes();
        this.initRadar();
    }
    initRadar(){
        let planeGeometry = new THREE.PlaneGeometry(50, 50);
        let vertexShader = `
            varying vec2 vUv;
            void main() {
                vUv = uv;
                gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.0);
            }
        `;
        let fragmentShader = `
            varying vec2 vUv;
            uniform float scale;
            uniform vec3 color1;
            uniform vec3 color2;
            void main() {
                float dis = distance(vUv, vec2(0.5, 0.5));
                float opacity = smoothstep(0.4 * scale, 0.5 * scale, dis);
                vec3 diffColor = color1 - color2;
                vec3 color = color2 + diffColor * scale;
                // 性能优化：GPU尽量少执行流程判断逻辑，多执行计算逻辑
                // if ( dis > 0.5 * scale ) {
                //     discard;
                // }
                opacity *= step(dis, 0.5 * scale);
                // 当 0 < scale < 0.8 之间时，不产生影响；当 scale > 0.8时计算渐隐效果
                opacity -= ( scale - 0.8 ) * 5.0 * step(0.8, scale);
                gl_FragColor = vec4(color, opacity); 
                
            }
        `;
        let planeMtl = new THREE.ShaderMaterial({
            vertexShader,
            fragmentShader,
            side:THREE.DoubleSide,
            transparent:true,
            uniforms:{
                scale:{ value:0 },
                color1:{ value:new THREE.Color('#e2fb00') },
                color2:{ value:new THREE.Color('#041cf3') }
            }
        });
        let planeMesh = new THREE.Mesh(planeGeometry, planeMtl);
        planeMesh.rotateX(-Math.PI / 2);
        this.canvasScene.add(planeMesh);
        let forceColor = new THREE.Color('#51f');
        animate();
        function animate(){
            // 利用三角函数实现反复运动
            planeMtl.uniforms.scale.value += 0.01;
            planeMtl.uniforms.scale.value %= 1;
            // planeMtl.uniforms.scale.value = Math.abs(Math.sin(performance.now()/1000));
            // 计算场景模型是否处于扫描区域内
            let scale = planeMtl.uniforms.scale.value;
            let far =  scale * 25;
            let near = ( scale - 0.1 ) * 25;
            group.children.forEach(mesh=>{
                mesh.material.uniforms.time.value += 0.01;
                let distance = mesh.position.distanceTo(planeMesh.position);
                if ( distance > near && distance < far ) {
                    // 扫描区域扫射到的模型
                    mesh.material.uniforms.forceColor = { value:forceColor };
                } else {
                    mesh.material.uniforms.forceColor = { value:new THREE.Color('#1ff') };
                }
            })
            requestAnimationFrame(animate);
        }
    
    }
    initBoxes(){
        let vertexShader = `
            varying vec3 vColor;
            uniform vec3 upColor;
            uniform vec3 upColor2;
            uniform vec3 bottomColor;
            uniform float time;
            uniform float speed;
            uniform float height;
            uniform vec3 forceColor;
            void main(){
                // 当模型有多个分段数时，根据百分比计算颜色的分布比例, 以底部为计算的起始点
                vec3 newPosition = position;
                float percent = ( position.y + height/2.0 )/height;
                vec3 disUpColor = upColor2 - upColor;
                vec3 realUpColor = upColor + disUpColor * abs(cos(time));

                // 计算表达式里的随时间变化的影响因子
                //vec3 dissColor = realUpColor - bottomColor;
                //vColor = percent * dissColor + bottomColor;

                vColor = forceColor;

                if ( newPosition.y > height/-2.0 ) {
                    newPosition.y -= abs(cos(time)) * speed;
                }
                newPosition.y = max(newPosition.y, height/-2.0);
                gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(newPosition, 1.0);
                
            }
        `;
        let fragmentShader = `
            varying vec3 vColor;
            void main(){
                gl_FragColor = vec4(vColor, 1.0); 
            }
        `;
        
        let boxMtl = new THREE.ShaderMaterial({
            vertexShader,
            fragmentShader,
            uniforms:{
                upColor:{ value:new THREE.Color('#ff0000') },
                upColor2:{ value:new THREE.Color('#00ff1a') },
                bottomColor:{ value:new THREE.Color('#000000' )},
                time:{ value:0 },
                speed:{ value:1 }
            }
        })
        // 创建多个长方体模型
        let shaders = [], meshs = [];
        for ( let i=0; i<200; i++){
            
            let height = Math.random() * 10 + 10;
            let itemShader = boxMtl.clone();
            shaders.push(itemShader);
            let boxMesh = new THREE.Mesh(
                new THREE.BoxGeometry(Math.random() + 0.2 , height, Math.random(), 10, 10, 10),
                itemShader
            );
            // 每个模型都更新自身的材质信息
            itemShader.uniforms.height = { value:height };
            itemShader.uniforms.upColor.value.g = Math.random();
            itemShader.uniforms.upColor2.value.g = Math.random();
            itemShader.uniforms.speed.value = (0.5 - Math.random()) * 10;
            boxMesh.position.x = ( 0.5 - Math.random()) * 100;
            boxMesh.position.y = height / 2;
            boxMesh.position.z = ( 0.5 - Math.random()) * 100;
            group.add(boxMesh);   
        }
        this.canvasScene.add(group);
       
    }
}